<template>
  <div class="boxs"
       :class="isDark.isDarkMode?'ssms':'qsms'"
       style="height: 100%;
">
    <!--  logo区域-->
    <div class="jz_flex fz_18 em bhh" style="height: 50px">小马鲜生</div>
    <!--  菜单栏-->
    <div style="height: calc(100% - 100px)">
      <el-row class="tac jz hh " style="width: 92%;">
        <el-col class="hh " :span="12" style="min-width: 100%;z-index: 1">
          <el-menu
              default-active="2"
              class=""
              :style="isDark.isDarkMode?'background-color: #1c1e23':'background-color: white'"
              @open="handleOpen"
              @close="handleClose"
          >
            <el-sub-menu  :class="isDark.isDarkMode?'wz_white':'wz_black'"
                         class="mag_t-10" :index="item.id"
                         v-for="(item,index) in RouterList" :key="index">
              <template #title>
                <el-icon :size="20">
                  <component :is="item.icon" />
                </el-icon>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item-group title=""
                                  :class="isDark.isDarkMode?'ssms-menu':'qsms-menu'"
                                  v-for="(itemchildren,indexchildren) in item.children" :key="itemchildren.id">
                <el-menu-item :class="(router_id == itemchildren.id ? (isDark.isDarkMode ? 'menu_ssms' : 'hover_qsms') : '')"
                              @click="addRouter(itemchildren)" :index="itemchildren.id"
                              style="border-radius: 10px;padding: 15px 0;">
                  <div class="wh_max" :class="isDark.isDarkMode?'ssms-er':'qsms-er'">
                    <span class="mag_l-30" :class="isDark.isDarkMode?'wz_white':'wz_black'">
                      <el-icon :size="20">
                        <component :is="itemchildren.icon" />
                      </el-icon>
                      {{ itemchildren.name }}
                    </span>
                  </div>
                </el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script setup lang="ts">
// 引入pinia
import {storeVuex} from  '@/store/modules/user'
import {storeToRefs} from "pinia";
const Vuex = storeToRefs(storeVuex())
const isDark = storeVuex()
import {ArrowDown,Tools} from '@element-plus/icons-vue'
import {
  Document,
  Menu as IconMenu,
  Location,
  Setting, Operation,
} from '@element-plus/icons-vue'
import {reactive, ref} from "vue";
import router from "@/router";
const emit = defineEmits(["routerLink"])
let router_id = ref()

// 获取vuex
const userStore = storeVuex();
var RouterList = userStore.MenuList


var RouterList1 = reactive([
  {
    title:'仪表盘',
    id:1,
    route:'',
    children:[
      {
        title:'数据分析',
        id:'数据分析',
        route:'/dashboard/dataAnalyse',
      }
    ]
  },
  {
    title:'权限管理',
    id:'权限管理',
    route:'',
    children:[
      {
        title:'账号管理',
        id:"账号管理",
        route:'/root/userList',
      },
      {
        title:'权限组管理',
        id:"权限组管理",
        route:'/root/rootGroup',
      },
      {
        title:'饭店管理',
        id:"饭店管理",
        route:'/hotel/index',
      },
      {
        title:'路由管理',
        id:"路由管理",
        route:'/root/routeSet',
      },
    ]
  },
  {
    title:'工作台',
    id:3,
    route:'',
    children:[
      {
        title:'收银',
        id:'收银',
        route:'/getMoney',
      }
    ]
  },
  {
    title:'产品管理',
    id:6,
    route:'',
    children:[
      {
        title:'产品分类',
        id:6,
        route:'/shopType',
      }]
  },
  {
    title:'设置',
    id:5,
    route:'',
    children:[
      {
        title:'个人资料',
        id:7.1,
        route:'/UserInfo',
      },
      {
        title:'设置',
        id:7.2,
        route:'/AdminSetting',
      }
    ]
  },
])
const addRouter = (e:any)=>{
  console.log('路由',e)
  router_id.value = e.id
  emit('routerLink', e.path);
}
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>
<style scoped>
.title_hover_black{
  padding: 15px 0;
  border-radius: 10px;
}
.title_hover_black:hover{
  background-color: #2e3033;
}
.menu_ssms{
  background-color: #2e3033;
  padding: 15px 0;
}
.menu_qsms{
  background-color: #e5e9ff;
  color: #6c83fd;
  padding: 15px 0;
}
.hover_qsms{
  border-radius: 10px;
  background-color: #e5e9ff;
  color: #3574f0;
}
</style>
